<!DOCTYPE html>
<html>
<head>
	<title></title>



	<style type="text/css">
		ul{
			list-style: none;
			padding: 0;
			margin: 0;
		}

		.clearfix:after {                 
			content: "." ;                    
			display: block ;   
			height: 0 ;
			clear: both ;
			visibility: hidden;   
		}   
		.clearfix{ display: inline-block; }   
		      /*  Hides from IE-mac  \*/         
		*html .clearfix{ height:1%; }   
		.clearfix{ display:block; }

		.tabs>ul>li{
			float: left;
			height: 50px;
			line-height: 50px;
			width: 120px;
			text-align: center;
		}
		.tabs>ul{
			background: #D9D9D9;
			border-bottom: 1px solid green;
		}
		.tabs>ul>li.selected{
			background: green;
		}
		.tabs>div{
			display: none;
		}
		.tabs>div.selected{
			display: block;
		}
		.tabs>ul>li:hover{
			cursor: pointer;
		}
		.tabs>ul>li.selected{
			cursor: default;
		}

	</style>
</head>
<body>

	<div class="tabs">
		<ul class="clearfix">
			<li class="selected" >商品1</li>
			<li>商品2</li>
			<li>商品3</li>
		</ul>
		<div id="tab-1" class="selected">商品内容1</div>
		<div id="tab-2">商品内容2</div>
		<div id="tab-3">商品内容3</div>
	</div>

	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.js"></script>
	<script type="text/javascript">
		$(".tabs>ul>li").click(function(){
			$(this).siblings(".selected").removeClass("selected").end().addClass("selected");
			var index=$(this).index();
			$(".tabs>div").eq(index).show().siblings("div").hide();
		});

	</script>

</body>

</html>